<template>
  <div class="datail">
    <div class="pic">
      <van-swipe :autoplay="3000" :show-indicators="false" height="320">
        <van-swipe-item
          v-for="(image, index) in storeInfo.picList"
          :key="index"
        >
          <van-image width="100%" height="100%" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="time">营业时间: {{ storeInfo.description }}</div>
      <!-- <div class="back" @click="back">
        <van-icon name="arrow-left" color="#fff" />
      </div> -->
    </div>
    <div class="main">
      <div class="box_1">
        <div class="name">
          {{ storeInfo.title }}
          <div class="num">
            <van-icon name="star" color="#c10500" /> 5.0
            <!-- <div class="text">评价 999条</div> -->
          </div>
        </div>
        <div class="location">
          <div class="address_name">
            <van-icon name="location-o" color="#2e2f30" class="location_icon" />
            <span>门店地址：{{ storeInfo.address }}</span>
            <div class="distance" v-show="storeInfo.distance">
              距您{{ storeInfo.distance }}
            </div>
          </div>
          <div class="phone" @click="takePhone">
            <van-image
              width="100%"
              height="100%"
              :src="require('@/assets/icon/store/phone.png')"
            />
          </div>
        </div>
        <!-- 优惠券 v1不上 -->
        <!-- <div class="discount">
          <div class="discount_name">新人专享：20元xxx券</div>
          <div class="btn">领券 ></div>
        </div> -->
      </div>
      <div class="box_2">
        <div class="flex_col">
          <div class="pic">
            <van-image
              width="100%"
              height="100%"
              :src="require('@/assets/icon/store/recommend.png')"
            />
          </div>
          <div class="word">门店推荐</div>
        </div>
        <div class="recomend_goods">
          <van-swipe
            :show-indicators="false"
            :loop="true"
            autoplay="3000"
            :style="{
              height: vw(180),
              width: vw(850),
            }"
          >
            <van-swipe-item v-for="(v, i) in recommendList" :key="i">
              <goodsItem
                :recommend="true"
                :item="v"
                @buy="buyNow"
                @click.native="goDetail(v)"
              ></goodsItem>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- vip v1不上 -->
      <!-- <div class="vip_box">
        <div class="left">
          <div class="icon">
            <van-image
              width="100%"
              height="100%"
              :src="require('@/assets/icon/store/vip.png')"
            />
          </div>
          <span class="vip_tips">您还未开通会员，开通可享受5折起权益</span>
        </div>
        <div class="right">立即开卡</div>
      </div> -->
    </div>
    <div class="server_box">
      <div class="car_box">
        <div class="car_box_left">
          <div class="icon">
            <van-image
              width="100%"
              fit="contain"
              :src="require('@/assets/icon/store/car.png')"
            />
          </div>
          <!-- <span class="car_tips">为您的爱车精准推荐商品/服务</span> -->
        </div>
        <div v-if="!hasCar" class="right">+添加爱车</div>
        <div v-else class="right">{{ carList[currentCarIndex].brand }}▼</div>
      </div>
      <div class="treeSelect">
        <van-tree-select
          height="auto"
          :items="storeCategoryList"
          :main-active-index.sync="active"
          @click-nav="handleClickMenu"
        >
          <template #content>
            <!-- <van-image
              v-if="active === 0"
              src="https://img01.yzcdn.cn/vant/apple-1.jpg"
            />
            <van-image
              v-if="active === 1"
              src="https://img01.yzcdn.cn/vant/apple-2.jpg"
            /> -->
            <div class="content">
              <div
                v-for="(v, i) in storeCategoryList"
                :key="i"
                class="content_item"
              >
                <!-- <template v-if="active == i"> -->
                <div class="item_name" :ref="`name_${i}`">{{ v.text }}</div>
                <div class="item_list">
                  <goodsItem
                    v-for="(a, b) in v.list"
                    :key="b"
                    :item="a"
                    @buy="buyNow"
                    @click.native="goDetail(a)"
                  ></goodsItem>
                </div>
                <!-- </template> -->
              </div>
            </div>
          </template>
        </van-tree-select>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import goodsItem from "@/components/goodsItem.vue";
import { mapGetters } from "vuex";
import { vw } from "@/utils/common";
export default {
  components: { goodsItem },
  props: {},
  data() {
    return {
      active: 0,
      id: -1,
      storeInfo: {},
      hasCar: false,
      storeCategoryList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 50,
      },
      location: {
        lat: "",
        lng: "",
      },
      recommendList: [],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["carList", "currentCarIndex", "locationInfo"]),
  },
  methods: {
    vw,
    handleClickMenu(index) {
      console.log(444, index);
      let element = this.$refs[`name_${index}`][0];
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
          black: "start",
        });
      }
    },
    async getStoreDetail() {
      let res = await api.getStoreDetail({
        shopId: this.id,
        // latitude: this.location?.lat,
        // longitude: this.location?.lng,
      });
      this.storeInfo = res;
      let cate = await api.getShopCategory({
        storeId: this.storeInfo.id,
      });
      cate.forEach(async (v) => {
        let item = await api.getHomeGoods({
          ...this.pageInfo,
          storeId: this.storeInfo.id,
          categoryId: v.categoryId,
        });

        // item.data.forEach(async (goods) => {
        //   let { specs } = await api.getGoodsinfo({
        //     goodsId: goods.id,
        //   });
        //   goods["specs"] = specs;
        // });
        this.storeCategoryList.push({
          text: v.categoryName,
          list: item.data,
        });
      });
      let result = await api.getRecommendList({ storeId: this.id });
      this.recommendList = [...this.recommendList, ...result];
    },
    back() {
      this.$router.back();
    },
    takePhone() {
      window.location.href = `tel:${this.storeInfo.phone}`;
    },
    async buyNow(item) {
      // this.$router.push({
      //   path: "/makeSure",
      //   query: {
      //     id: item.id,
      //     skuId: item.specs[0].skuId,
      //     num: 1,
      //   },
      // });
      // console.log(item);

      this.goDetail(item);
    },
    goDetail(v) {
      // let type = -1;
      // if (v.categoryId == "1923197645038747649") {
      //   //洗车
      //   type = 0;
      // } else if (v.categoryId == "1923192237742030850") {
      //   //保养
      //   type = 2;
      // } else if (v.categoryId == "1923196720186327042") {
      //   //轮胎
      //   type = 1;
      // }
      this.$router.push({
        path: "/serveDetail",
        query: {
          // type,
          goodsId: v.id,
        },
      });
    },
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    // this.location.lat = this.locationInfo.latitude;
    // this.location.lng = this.locationInfo.longitude;
    this.getStoreDetail();
    if (this.carList.length > 0) {
      this.hasCar = true;
    }
  },
};
</script>
<style lang="less" scoped>
.datail {
  min-height: 100vh;
  overflow-x: hidden;

  .pic {
    width: 100%;
    height: 700px;
    position: relative;

    .time {
      color: #fff;
      font-size: 40px;
      position: absolute;
      bottom: 80px;
      left: 50px;
    }

    .back {
      font-size: 70px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  }

  .main {
    padding: 0 50px;
    position: relative;

    .box_1 {
      margin-top: -50px;
      padding: 50px 50px 70px 30px;
      background-color: #fff;
      border-radius: 20px;

      .name {
        font-size: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;

        .num {
          font-size: 46px;
          color: #c10500;
          font-weight: bold;
          text-align: center;

          .text {
            font-size: 32px;
            color: #909090;
          }
        }
      }

      .location {
        margin-top: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .address_name {
          font-size: 38px;
          margin-left: 15px;

          .location_icon {
            font-size: 50px;
            margin-right: 15px;
            font-weight: bold;
          }
        }

        .distance {
          font-size: 38px;
          margin-top: 10px;
        }

        .phone {
          min-width: 96px;
          max-width: 96px;
          height: 96px;
        }
      }

      .discount {
        margin-top: 55px;
        padding: 20px 25px;
        border-radius: 15px;
        background-color: #ffe4ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #e73353;

        &_name,
        .btn {
          font-size: 40px;
        }

        &_name {
          padding: 8px 15px;
          border: 1px solid #f6a2b4;
          border-radius: 10px;
        }
      }
    }

    .box_2 {
      padding: 50px 0 50px 30px;
      background-color: #fff;
      border-radius: 20px;
      margin-top: 25px;
      display: flex;
      align-items: center;

      .flex_col {
        min-width: 190px;
        height: 190px;
        margin-right: 40px;
        border-right-width: 3px;
        border-right-color: #bbbbbb;
        border-right-style: solid;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 20px;

        .pic {
          width: 134px;
          height: 134px;
        }

        .word {
          font-size: 40px;
          margin-top: 15px;
        }
      }
      .recomend_goods {
        flex-grow: 1;
      }
    }

    .vip_box {
      margin-top: 40px;
      padding: 8px 15px;
      background: linear-gradient(to right, #2a3971, #575791);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px;

      .left {
        display: flex;
        align-items: center;

        .icon {
          width: 98px;
          height: 98px;
        }

        .vip_tips {
          font-size: 38px;
          color: #fadab0;
          margin-left: 15px;
        }
      }

      .right {
        padding: 5px 30px;
        background: #d2984e;
        font-size: 40px;
        border-radius: 999px;
        text-align: center;
        color: #fff;
      }
    }
  }

  .server_box {
    margin-top: 40px;
    background: #fff;
    border-radius: 30px 30px 0 0;
    padding-top: 40px;

    .car_box {
      padding: 30px 40px;
      background: #f8faff;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 30px;

      .car_box_left {
        display: flex;
        align-items: center;

        .icon {
          width: 55px;
          height: 48px;
          display: flex;
          align-items: center;
        }

        .car_tips {
          font-size: 44px;
          color: #058efb;
          margin-left: 25px;
          letter-spacing: 2px;
        }
      }

      .right {
        font-size: 46px;
        color: #058efb;
      }
    }

    .treeSelect {
      margin-top: 35px;

      .content {
        &_item {
          margin-bottom: 30px;
          padding: 0 20px;
          box-sizing: border-box;

          .item_name {
            font-size: 44px;
            margin-bottom: 25px;
          }

          .item_list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
          }
        }
      }

      /deep/.van-tree-select {
        max-height: 1000px;
      }
    }
  }
}
</style>
